$duration-modal: 0.2s;
$move: -50px;
$opacity-modal: 0;

$duration-bg: 0.2s;

$easing-enter: ease-out;
$easing-exit: ease-in;

.components-animation-modal {
  will-change: opacity, transform;
  transform: translateZ(0) scale(1);
}
.components-animation-modal-enter > .modal > .modal-dialog {
  opacity: $opacity-modal;
  transform: translate(0, $move) scale(0.95);
}
.components-animation-modal-enter-active > .modal > .modal-dialog {
  opacity: 1;
  transition: transform $duration-modal $easing-enter,
    opacity $duration-modal $easing-enter;
  transform: translate(0, 0) scale(1);
}
.components-animation-modal-exit > .modal > .modal-dialog {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.components-animation-modal-exit-active > .modal > .modal-dialog {
  opacity: $opacity-modal;
  transform: translate(0, $move) scale(0.95);
  transition: transform $duration-modal $easing-enter,
    opacity $duration-modal $easing-enter;
}

.components-animation-backdrop {
  will-change: background-color;
  transform: translateZ(0);
}
.components-animation-backdrop-enter {
  background-color: rgba(30, 30, 30, 0.01);
}
.components-animation-backdrop-enter-active {
  background-color: rgba(30, 30, 30, 0.8);
  transition: opacity $duration-bg $easing-exit;
  backdrop-filter: saturate(50%) blur(12px);
}
.components-animation-backdrop-enter-done {
  background-color: rgba(30, 30, 30, 0.8);
  transition: opacity $duration-bg $easing-exit;
  backdrop-filter: saturate(50%) blur(12px);
}
.components-animation-backdrop-exit {
  background-color: rgba(30, 30, 30, 0.8);
}
.components-animation-backdrop-exit-active {
  background-color: rgba(30, 30, 30, 0.01);
  transition: opacity $duration-bg $easing-exit;
}
